<template>
  <div class="map-container">
    <!-- 地图渲染区域 -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useDataProcessor } from "@/hooks/useDataProcessor";

const { processedData, isProcessing, error, processData } = useDataProcessor();
const points = ref([]); // GPS点数据
const viewport = ref({ left: 0, right: 1000, top: 0, bottom: 800 }); // 视口范围

// 模拟获取GPS数据
const fetchData = () => {
  // 实际项目中这里会是API请求或WebSocket数据
  points.value = Array.from({ length: 1000 }, (_, i) => ({
    id: i,
    lat: 39.9042 + (Math.random() - 0.5) * 0.5,
    lng: 116.4074 + (Math.random() - 0.5) * 0.5,
    speed: Math.random() * 120,
    direction: Math.random() * 360,
    timestamp: Date.now()
  }));
};

// 视口变化时处理数据
const handleViewportChange = newViewport => {
  viewport.value = newViewport;
  processData(points.value, newViewport);
};

onMounted(() => {
  fetchData();
  // 初始处理一次数据
  processData(points.value, viewport.value);
});
</script>
